<template>
  <a-modal :title="this.title" :visible="this.visible" @cancel="cancel" @ok="ok">
    <a-form :form="form" layout="horizontal">
      <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="目录名称">
       {{record.title}}
      </a-form-item>
      <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="目录描述">
        <a-input v-decorator="['discription', {   initialValue: record.discription,rules: [
        {
          required: false, // 是否必填
          message: '请填写目录描述', // 必填验证提示，
          whitespace: false // 必选时，空格是否被视为错误
        },{
          pattern: /^[a-zA-Z0-9_()（）\u4e00-\u9fa5]{1,255}$/,
          message: '目录描述为1至255位汉字、字母、数字、下划线或中英文括号'
        }
        ] }]" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import aModal from '@/common/modal';
import { UPDATEMENU } from '@/../static/js/apis.js';

export default {
  inject:['reload'],                                 //注入App里的reload方法
  name: 'editMenuModal',
  props: ['title', 'visible', 'record'],
  components: {
    aModal
  },
  data () {
    return {
      form: this.$form.createForm(this),
      labelCol: { span: 5 },
      wrapperCol: { span: 18 }
    }
  },
  //  watch: {
  //     type(value) {
  //       console.log(value);
  //     },
  // },
  methods: {
    ok (e) {
      const self = this
      e.preventDefault()
      self.form.validateFields((err, values) => {
        if (!err) {
          values.id=self.record.value;
          console.log(values);
          UPDATEMENU(values, function (res) {
            if (res.code='200') {
              self.$message.success(res.message)
              self.$emit('ok', e)
              self.reload()
              // self.$router.push({path: '/newPage',query:{system:'数据管理',menuId:res.obj.id}})
              // self.$store.commit('changeFirstNavSelected', res.obj.key)
            } else self.$message.error(res.message)
          })

        } else {
          self.$message.error('请按要求填写目录信息！')
        }
      })
    },
    cancel (e) {
      this.form.resetFields()
      this.$emit('cancel', e)
    }
  }
}
</script>

<style scoped>
.ant-form-item {
  margin-bottom: 0px;
}
</style>
